<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
</head>

<body>
    <div id="code"></div>
    <img id="img" />
    <a href="javascript:void(0)" id="save">保存</a>
    <a href="javascript:void(0)" id="makeQrcode">生成二维码</a>
    <img src="" alt="" id="showimg">
    <!-- <img style="width: 100%;"
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593862689074&di=b940c6cad69cee704d227d6e6504f500&imgtype=0&src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F019%2F373%2F540%2Fc03ed83ed44b45a7888d65817e162e16.jpg"
        alt=""> -->
</body>
<input type="hidden" id="url" name="url" value="http://www.perfind.cn/">
<script src="_static_resource/js/jquery.min.js"></script>
<!-- <script src="_static_resource/js/qrcode.min.js"></script>
<script src="_static_resource/js/qrcode.js"></script> -->
<script src="_static_resource/js/jquery-qrcode.js"></script>
<script type="text/javascript">
    $(function () {
        $("a#makeQrcode").click(function () {
            var qrcode = $("#code").qrcode({
                render: 'canvas',
                width: 200, //宽度
                height: 200, //高度
                text: "http://www.baidu.com" //任意内容
            })
        })
        $("a#save").click(function () {
            var canvas = $("div#code").find('canvas').get(0);
            console.log(canvas);
            //如果有循环,此句必不可少 qrcode.find('canvas').remove();
            var data = canvas.toDataURL('image/jpg');
            $.ajax({
                type: 'post',
                url: '/index/test/baseToimg',
                data: { img: data },
                success: function (ret) {
                    $("img#showimg").attr('src', ret);
                    console.log(ret);
                }
            })
            // console.log(data);
            // $('#img').attr('src', data);
            // saveFile(data, "fd范德萨范德萨");
        })

        // var canvas = qrcode.find('canvas').get(0);
        // //如果有循环,此句必不可少 qrcode.find('canvas').remove();
        // var data = canvas.toDataURL('image/jpg');
        // $('#img').attr('src', data);
        // saveFile(data, "fd范德萨范德萨");
    })

    //转为图片的方法,需要上门的data
    function saveFile(data, filename) {
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };
</script>

</html>